// 侧边栏组件
import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import { DatabaseOutlined, ToolOutlined, AppstoreOutlined, PieChartOutlined, FileTextOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Link, useLocation } from 'react-router-dom';

const { Sider } = Layout;

interface SidebarProps {
  onCollapse?: (collapsed: boolean) => void;
}

const Sidebar: React.FC<SidebarProps> = ({ onCollapse }) => {
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  
  const menuItems = [
    {
      key: '/',
      icon: <DatabaseOutlined />,
      label: <Link to="/">数据集</Link>,
    },
    {
      key: '/features',
      icon: <ToolOutlined />,
      label: <Link to="/features">特征工厂</Link>,
    },
    {
      key: '/jobs',
      icon: <AppstoreOutlined />,
      label: <Link to="/jobs">创建作业</Link>,
    },
    {
      key: '/models',
      icon: <PieChartOutlined />,
      label: <Link to="/models">模型管理</Link>,
    },
    {
      key: '/evaluation',
      icon: <FileTextOutlined />,
      label: <Link to="/evaluation">模型评估</Link>,
    },
  ];

  const handleCollapse = (value: boolean) => {
    setCollapsed(value);
    if (onCollapse) {
      onCollapse(value);
    }
  };

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={handleCollapse}
      width={200}
      collapsedWidth={80}
      theme="light"
      style={{ background: '#fff', boxShadow: '2px 0 8px rgba(0, 0, 0, 0.05)', minHeight: 'calc(100vh - 64px)' }}
    >
      <div style={{ textAlign: 'center', padding: '20px 0' }}>
        {collapsed ? <MenuUnfoldOutlined style={{ fontSize: '20px', cursor: 'pointer' }} onClick={() => handleCollapse(false)} /> : <MenuFoldOutlined style={{ fontSize: '20px', cursor: 'pointer' }} onClick={() => handleCollapse(true)} />}
      </div>
      <Menu
        mode="inline"
        selectedKeys={[location.pathname]}
        items={menuItems}
        style={{ borderRight: 0, paddingTop: collapsed ? '0' : '24px' }}
      />
    </Sider>
  );
};

export default Sidebar;